<template>
	<view
	style="background-color: #FFFFFF;"
	class="head-card flex-center-between"
	>
		<view class="flex-center">
			<view class="u-avatar-52 clear-flex">
				<image :src="showImage(item.userAvatar)" class="auto-img"></image>
			</view>
		
			<view class="u-m-l-22">
				<view class="flex-center">
					<view class="u-m-r-4 u-f-28 u-h-40 font-medio linecamp-1"
						style="max-width: 260rpx;">{{ item.userNick || '' }}</view>
					<view class="flex-center u-f-24 u-lh-34">
						<view class="color-grew">{{ lang_goods.unCompleteCollageTips[0] }}</view>
						<view class="u-m-r-10 u-m-l-10 color-red">
							{{ (item.limitNum || 0) - (item.num || 0) }}</view>
						<view class="color-grew">{{ lang_goods.unCompleteCollageTips[1] }}</view>
					</view>
				</view>
				<view class="u-f-24 u-lh-34 color-grew flex-center">
					<view>{{ lang_common.remainTime }}</view>
					<x-counttime :time="item.endTime" format="D+ H+:m+:s+"></x-counttime>
				</view>
			</view>
		</view>
		
		<x-common-btn v-if="showCollageBtn" width="128" height="48" @click="$emit('change', item)">
			<view class="u-f-22 u-lh-32">{{ lang_goods.joinCollage }}</view>
		</x-common-btn>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({ })
			}
		},
		data() {
			return {}
		},
		computed: {
			stock() {
				let { stock, fakeSellCount, sellCount } = this.item
				return (stock || 0) - (fakeSellCount || 0) - (sellCount || 0)
			},
			showCollageBtn() {
				let { limitNum, num } = this.item
				return limitNum > num
			}
		}
	}
</script>

<style scoped lang="scss">
	.head {
		&-card {
			padding: 30rpx 38rpx;
			border-top: 2rpx solid rgba(151, 151, 151, .1);
		}
	}
</style>
